<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Button Toggle (On/Off Switch)</title>
    <link rel="stylesheet" href="https://public.codepenassets.com/css/reset-2.0.min.css">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600,700'>
    <link rel='stylesheet'
          href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
    <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="jumbotron">
    <h1>On/Off Switch</h1>
    <p class="lead">Bootstrap Button Toggle</p>
</div>

<div class="container example">

    <div class="row">
        <div class="col-sm-12">
            <h3>Default Color <small>(Brand Primary)</small></h3>
        </div>
    </div>

    <div class="row">

        <div class="col-sm-2">
            <h6>Large</h6>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-lg btn-toggle" data-toggle="button" aria-pressed="false"
                    autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-lg btn-toggle active" data-toggle="button" aria-pressed="true"
                    autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

    </div>

    <div class="row">

        <div class="col-sm-2">
            <h6>Default</h6>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-toggle" data-toggle="button" aria-pressed="false" autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-toggle active" data-toggle="button" aria-pressed="true"
                    autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

    </div>

    <div class="row">

        <div class="col-sm-2">
            <h6>Small</h6>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-sm btn-toggle" data-toggle="button" aria-pressed="false"
                    autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-sm btn-toggle active" data-toggle="button" aria-pressed="true"
                    autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

    </div>

    <div class="row">

        <div class="col-sm-2">
            <h6>Mini</h6>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-xs btn-toggle" data-toggle="button" aria-pressed="false"
                    autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-xs btn-toggle active" data-toggle="button" aria-pressed="true"
                    autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

    </div>

</div>


<!-- Secondary Color -->

<div class="container example">

    <div class="row">
        <div class="col-sm-12">
            <h3>Secondary Color <small>(Brand Secondary)</small></h3>
        </div>
    </div>

    <div class="row">

        <div class="col-sm-2">
            <h6>Large</h6>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-lg btn-secondary btn-toggle" data-toggle="button" aria-pressed="false"
                    autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-lg btn-secondary btn-toggle active" data-toggle="button"
                    aria-pressed="true" autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

    </div>

    <div class="row">

        <div class="col-sm-2">
            <h6>Default</h6>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-secondary btn-toggle" data-toggle="button" aria-pressed="false"
                    autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-secondary btn-toggle active" data-toggle="button" aria-pressed="true"
                    autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

    </div>

    <div class="row">

        <div class="col-sm-2">
            <h6>Small</h6>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-sm btn-secondary btn-toggle" data-toggle="button" aria-pressed="false"
                    autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-sm btn-secondary btn-toggle active" data-toggle="button"
                    aria-pressed="true" autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

    </div>

    <div class="row">

        <div class="col-sm-2">
            <h6>Mini</h6>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-xs btn-toggle" data-toggle="button" aria-pressed="false"
                    autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

        <div class="col-sm-5">
            <button type="button" class="btn btn-xs btn-secondary btn-toggle active" data-toggle="button"
                    aria-pressed="true" autocomplete="off">
                <div class="handle"></div>
            </button>
        </div>

    </div>


</div><!-- /.container -->
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
</body>
</html>
